<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <p><input type="text"><input type="button" value="搜索" id="search"></p>
   <table>
      <thead>
      <tr>
          <td>ID</td>
          <td>学生姓名</td>
          <td>联系方式</td>
          <td>班级</td>
          <td>操作</td>
      </tr>
      </thead>
      <tbody>
      <?php foreach($data as $val){ ?>
      <tr>
          <td><?= $val['id']?></td>
          <td><span id="upd" upd_id="<?= $val['id']?>"><?= $val['s_name']?></span><input type="text" style="display: none" id="aa" upd_id="<?= $val['id']?>"></td>
          <td><?= $val['s_tel']?></td>
          <td><?= $val['s_class']?></td>
          <td><a href="javascript:void(0);" id="del" del_id="<?= $val['id']?>">删除</a></td>
      </tr>
      <?php } ?>
      </tbody>
   </table>
    <p id="page">
        <a href="javascript:void(0);" page="1">首页</a>
        <a href="javascript:void(0);" page="<?= $page['up']?>">上一页</a>
        <a href="javascript:void(0);" page="<?= $page['down']?>">下一页</a>
        <a href="javascript:void(0);" page="<?= $page['last']?>">尾页</a>
    </p>
</center>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    //删除
    $(document).on("click","#del",function(){
        var del_id = $(this).attr("del_id");
        $.ajax({
            url:"{:url('info/del')}",
            data:{del_id:del_id},
            dataType:"json",
            type:"post",

            success:function(e){
                if(e == 1){
                   history.go(0);
                }else{
                    alert("删除失败");
                }
            }
        })
    })

    //修改
    $(document).on("click","#upd",function(){
        $(this).val();
        $(this).hide();
        $(this).next().show();
        $(this).next().focus();
        $(this).next().val($(this).html());
    })
    $(document).on("blur","#aa",function(){
        var upd_id = $(this).attr("upd_id");
        var new_name = $(this).val();

        var _this = $(this);
        $.ajax({
            url:"{:url('info/upd')}",
            data:{upd_id:upd_id,new_name:new_name},
            dataType:"json",
            type:"post",

            success:function(e){
                if(e == 1){
                    _this.hide();
                    _this.prev().show().html(_this.val());
                }else{
                    alert("修改失败");
                }
            }
        })
    })

    //搜索
    $(document).on("click","#search",function(){
        var search = $(this).prev().val();

        $.ajax({
            url:"{:url('info/show')}",
            data:{search:search},
            dataType:"json",
            type:"post",

            success:function(e){
              data(e);
            }
        })
    })

    //分页 搜索
    $(document).on("click","#page a",function(){
        var page = $(this).attr("page");
        var search = $("#search").prev().val();
        $.ajax({
            url:"{:url('info/show')}",
            data:{page:page,search:search},
            dataType:"json",
            type:"post",

            success:function(e){
                data(e);
                page1(e);

            }
        })
    })


    function data(e){
        var tr = '';
        $.each(e.data,function(i,v){
            tr += '<tr>';
            tr += '<td>'+v['id']+'</td>'
            tr += ' <td><span id="upd" upd_id="'+v['id']+'">'+v['s_name']+'</span><input type="text" style="display: none" id="aa" upd_id="'+v['id']+'"></td>'
            tr += '<td>'+v['s_tel']+'</td>'
            tr += '<td>'+v['s_class']+'</td>'
            tr += '<td><a href="javascript:void(0);" id="del" del_id="'+v['id']+'">删除</a></td>'
            tr += '</tr>';
        })

        $("tbody").empty();
        $("tbody").append(tr);
    }
    function page1(e){
        var pages = '';
        var page = e.page;

        pages += '<a href="javascript:void(0);" page="1">首页</a>';
        pages += '<a href="javascript:void(0);" page="'+page['up']+'">上一页</a>'
        pages += '<a href="javascript:void(0);" page="'+page['down']+'">下一页</a>'
        pages += '<a href="javascript:void(0);" page="'+page['last']+'">尾页</a>'

        $("#page").empty();
        $("#page").append(pages);
    }


</script>